<template>
	<view >
		<view class="formModel">
		
		<view class="cu-form-group">
			<view class="title">养殖场名</view>
			<input v-model="farmName" placeholder="请输入养殖场名" name="input"></input>
		</view>
		<!-- <view class="cu-form-group">
			<view class="title">养殖场编号</view>
			<input type="number" v-model="farmid" placeholder="请输入养殖场编号" name="input"></input>
		</view> -->
		<view class="cu-form-group">
			<view class="title">养殖户名</view>
			<input v-model="farmFarmers" placeholder="请输入养殖户名" name="input"></input>
		</view>
		<!-- <view class="cu-form-group">
			<view class="title">联系方式</view>
			<input placeholder="请输入联系方式" name="input"></input>
		</view> -->
		<view class="cu-form-group" @tap="openLevel">
			<view class="title">所属区域选择</view>
			<picker disabled="flase">
				<view class="picker">
						<block v-if="pickerText == ''"><text>请选择所属区域</text></block>
						<block v-else>{{pickerText}}</block>
				</view>
			</picker>	
		</view>
		<view class="cu-form-group">
			<view class="title">选择地址</view>
			<picker disabled="flase" >
				<view class="picker" @tap="chooseLocation">
					<block v-if="hasLocation === false"><text>打开地图选择地址</text></block>
					<block v-if="hasLocation === true">{{locationAddress}}</block>
					
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">详细地址</view>
			<input v-model="farm_address" placeholder="请输入详细地址,如街道门牌号等"  name="input"></input>
		</view>
		<view class="cu-form-group" style="justify-content: start;">
			<view class="title">禁养区</view>
			<radio-group class="RadioStyle" @change="ised">
				<radio color="#4AC997" checked="true" value="0">是</radio>
				<radio color="#4AC997" value="1">否</radio>
			</radio-group>
		</view>
		<view class="cu-form-group" style="justify-content: start;">
			<view class="title">存栏</view>
			<input v-model="farm_seed" placeholder="请输入存栏数量" maxlength="15" type="number" name="input"></input>
			<text style="font-size:30rpx;">头</text>
		</view>
		<view class="cu-form-group" style="justify-content: start;">
			<view class="title">栏舍面积</view>
			<input v-model="farm_total_area" placeholder="请输入栏舍面积" maxlength="15" type="number" name="input"></input>
			<text style="font-size:30rpx;">亩</text>
		</view>
		<view class="cu-form-group" style="justify-content:start;">
			<view class="title">动物防疫检测合格证</view>
			<radio-group class="RadioStyle" @change="isHave">
				<radio color="#4AC997" checked="true" value="0">有</radio>
				<radio color="#4AC997" value="1">无</radio>
			</radio-group>
		</view>
		<template v-if=" isLicense =='0'?true:false">
			<view class="cu-bar bg-white" style="justify-content: space-between;margin-top:5rpx">
				<view class="action">
					图片上传
				</view>
				<view class="action" style="font-size: 30rpx;">
					{{imgList.length}}/1
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
					 <image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
		</template>
		</view>
       <view class="bottomModel" >
			<template v-if="isLicense=='no'?true:false">
				<view style="height: 100rpx; background-color: #FFFFFF;"></view>
			</template>
       </view>
	   <level-linkage ref="levelLinkage" :pickerValueDefault="pickerValueDefault" :allData="this.ThreeArea.provinceList" @onConfirm="onConfirm"
	   		 themeColor='#007AFF'>
	   </level-linkage>
	</view>
</template>
<script>
	var util = require('../../../common/util.js');
	var formatLocation = util.formatLocation;
	import levelLinkage from "../../../components/three-level-linkage/linkage.vue" 
	export default {
		data() {
			return {
				pickerValueDefault: [0, 0, 0],
				pickerText: '',
				imgList: [],
				farmid:'',
				num:0,//以下为养殖场数据
				farmName:'',//养殖场名
				farmFarmers:'',//养殖户名
				farm_county:'',//县
				farm_town:'',//镇
				farm_village:'',//村
				farm_address:'',//详细地址
				farm_longitude:'',//经度
				farm_latitude:'',//纬度
				isFarm:1,//是否禁养区
				farm_seed:'',//存栏量
				farm_total_area:'',//栏舍面积
				isLicense:0,//是否有动物检疫资格证
				hasLocation: false,
				location: {},
				locationAddress: '',
				selectCountyIndex:0,
				map:{},
				FilePaths:'',//本地图片地址,
				imgId:'',
				disabled:false
			};
		},
		components: {
			levelLinkage
		},
		onReady() {
			// console.log(this.multiArray[0][this.multiIndex[0]] + this.multiArray[1][this.multiIndex[1]] + this.multiArray[2][this.multiIndex[2]])
		},
		onNavigationBarButtonTap() {
			this.postFarmFile();
		},
		methods:{
			openLevel() {
				this.$refs.levelLinkage.open();
			},
			
			onConfirm(e) {
				// e 确认后选中的数据
				//console.log(e)
				this.pickerText = e.name
				this.farm_county = e.firstPick.name
				this.farm_town = e.secondPick.name
				this.farm_village = e.thirdPick.name
				// console.log(this.farm_county,this.farm_town,this.farm_village)
			},
			
			//图片上传
			imageUpload(FilePaths){
				// console.log(11);
				console.log(FilePaths)
				 uni.uploadFile({
				            url:this.confige.webUrl+"/aquaculture/uploadFarmImg",
				            filePath: FilePaths[0],
				            name: 'file',
				            formData:{
				                'token':this.User.token,
				            },
				            success: (uploadFileRes) => {
								console.log(uploadFileRes)
								let img = JSON.parse(uploadFileRes.data)
								// this.imagePaths.push(img) 
								// this.imgId = img.url;
								// console.log(img)
								if(img.code==400){
									uni.request({
										url:this.confige.webUrl+"/aquaculture/DelFarmImg",
										data:{
										},
										header:{
											'X-Token':this.User.token
										},
										success: (res) => {
											console.log(res)
										this.imageUpload(this.imgList)
										}
									})
								}
				            },
							fail:(err)=>{
							console.log(err)	
							}
				        });
			},

			//监听有无输入事件
			change() {
				if ( this.farmName
					 && this.farmFarmers
					 && this.farm_county 
					 && this.farm_town
					 && this.farm_village
					 && this.map.longitude
					 && this.map.latitude
					 && this.farm_seed
					 && this.farm_total_area) {
					this.disabled = true;
					return;
				}
				this.disabled = false;
			},
			//提交信息
			postFarmFile(){
					this.change();
					if (this.disabled==false)
					  {
						uni.showModal({
							title:"提示",
							content:"请检查养殖场名，养殖户名，所属区域，地址，存栏数，栏舍面积是否为空！",
							showCancel:false
						})
						return;
					}
				if(this.imgList.length>0){
						this.imageUpload(this.imgList)
				}
				let farm_address = this.map.address+this.farm_address
				console.log(farm_address)
				uni.request({
					url:this.confige.webUrl+"/aquaculture/newAuditAdd",
					data:{
						// farm_id:this.farmid,
						farm_name:this.farmName,
						farm_farmers:this.farmFarmers,
						farm_county:this.farm_county,
						farm_town:this.farm_town,
						farm_village:this.farm_village,
						farm_address:farm_address,
						farm_prohibited_area:this.isFarm,
						farm_seed:this.farm_seed,
						farm_total_area:this.farm_total_area,
						farm_certificate:this.isLicense,
						farm_latitude:this.map.latitude,
						farm_longitude:this.map.longitude,
                        farm_img_url:this.imgId
					},
					header:{
						'X-Token':this.User.token
					},
					method:"POST",
					success: (res) => {
						console.log(res)
						switch(res.data.code/100){
							case 2:
							uni.showModal({
								title:"提示",
								showCancel:false,
								content:"您已成功上传养殖场信息，请等待审核",
							    success:(res)=> {
									if (res.confirm) {
									uni.switchTab({
										url:"../productionAdmin"
									})
									} 
								}
							});
							break;
							case 4:
							uni.showModal({
								title:"提示",
								showCancel:false,
								content:res.data.message,
							    success:(res)=> {
									if (res.confirm) {
									
									} 
								}
							});
						}
					}
				})
			},
			//打开地图
			chooseLocation: function () {
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						this.hasLocation = true,
							this.location = formatLocation(res.longitude, res.latitude),
							this.locationAddress = res.address;
							this.map = res
					}
				})
			},
			
			//是否禁养区
			ised(e){
				console.log(e.detail.value);
				this.isFarm=e.detail.value;	
			},
			isHave(e){
				console.log(e.detail.value);
				this.isLicense=e.detail.value
			},
			ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res)
						// if (this.imgList.length != 0) {
						// 	this.imgList = this.imgList.concat(res.tempFilePaths)
						// } else {
							let rotate = 0;
							var imgUrl = res.tempFilePaths[0]
							uni.getImageInfo({
								src:res.tempFilePaths[0],
								success: (res) => {
									// console.log(res)
									var or = res.orientation;
									 switch (or) {  
										case 'up': //exif:1 不旋转  
											rotate = 0;  
											break;  
										case 'down': //exif:3 旋转180度  
											rotate = 180;  
											break;  
										case 'right': //exif:6 旋转90度  
											rotate = 90;  
											break;  
										case 'left': //exif:8 旋转270度  
											rotate = 270;  
											break;  
										default:  
											rotate = 0;  
											break;  
									}  
										plus.zip.compressImage({  
											src:imgUrl,  
											dst: "_doc/uniapp_temp" + '/compressed/' + Math.round(new Date()) + '.jpg',  
											// format: 'jpg',  
											quality:50,  
											width: 'auto',  
											height: 'auto',  
											rotate: rotate,  
										},  
										(event) => {  
											this.imgList.push(event.target) ;
											console.log(this.imgList);
										},  
										(error)=> {  
											console.log(error);  
										}); 
								},
								fail: (err) => {
									console.log(err)
								}
								
							})
						
						// console.log(this.imgList)
						// this.FilePaths = this.imgList
					}
				});
			},
			
			//图片预览
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			//取消上传
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要取消该照片的上传吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
	
		}
	}
</script>

<style lang="less" scoped>
@import "../../../common/colorui/main.css";
@import "../../../common/colorui/icon.css";
@import "../../../common/global.less";
.mapText{ font-size: 28upx;}
.RadioStyle{ 
	radio{
		margin-right: 10rpx;
		font-size: 30rpx;
		}
	}
.bottomModel{
margin-top: 50rpx;
// .butStyle{font-size: 30rpx; border-radius: 90rpx;width: 600rpx; height:80rpx;line-height: 80rpx;color:#FFFFFF; background-color:@maincolor;}
}
.formModel{
background-color:@backcolorthree;
border-bottom:2rpx solid #eaeaea;
.cu-form-group {
.title {min-width: calc(4em + 15px);}		
}
}

</style>
